<template>
  <el-row v-loading="loading">
    <el-col :span="24">
      <member-edit ref="memberEdit" :parentTmemberList="parentTmemberList"  v-on:save-finished="getTmemberList()"></member-edit>
      <el-row class="search-row">
          <el-input placeholder="档案号" size="small" v-model="search.fileNumber" >
          </el-input>
          <el-input placeholder="姓名" size="small" v-model="search.name" >
          </el-input>
          <el-input placeholder="手机号" size="small" v-model="search.phoneNumber" >
          </el-input>
          <el-button type="primary" @click="getTmemberList">查询</el-button>
        <el-col :span="12" style="text-align: right;">
          <el-button type="primary" icon="el-icon-plus" size="small"
            v-show="add" @click="handleCreateMember()" style="float:left">新增档案</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-table :data="MemberList.slice((pageNum-1)*pageSize,pageNum*pageSize)" border size="mini" header-cell-class-name="header-row">
            <el-table-column prop="fileNumber" label="档案号" header-align="center"></el-table-column>
            <el-table-column prop="name" label="姓名" header-align="center"></el-table-column>
            <el-table-column prop="sex" label="性别" header-align="center"></el-table-column>
            <el-table-column prop="age" label="年龄" header-align="center" align="center"></el-table-column>
            <el-table-column prop="tHealthmgr.healthMgrName" label="健康师" header-align="center" align="center"></el-table-column>
            <el-table-column prop="phoneNumber" label="手机号" header-align="center" align="center"></el-table-column>
            <el-table-column prop="regTime" label="注册时间" header-align="center" align="center"></el-table-column>
            <el-table-column label="操作" header-align="center" align="center" width="200">
              <template slot-scope="scope">
                <el-button v-show="edit" type="primary" size="mini"
                  @click="handleEditMember(scope.row)">编辑</el-button>
                <el-button type="danger" size="mini"
                  @click="handleDeleteMember(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-pagination
            background
            @size-change="handleSizeChange"
            :current-page.sync="pageNum"
            :page-sizes="[2,4,6,8]"
            :page-size="pageSize"
            layout="total,sizes,prev,pager,next,jumper"
            :total="MemberList.length">
          </el-pagination>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import {MemberQueryAll,MemberQueryLike,MemberDelete,MemberQueryById,queryAllThealthmgr} from '@/api/Member_Profile_tj'
import MemberEdit from '@/components/memberprofile/memberEdit'
export default {
data() {
    return {
      loading: false,
      add:true,
      edit:true,
      MemberList:[],
      pageSize:5,//每页显示的条数
      pageNum:1,
      search: {
        name: '',
        phoneNumber:'',
        fileNumber:''
      },
      parentTmemberList:[]
    }
  },
  methods: {
    handleSizeChange(val) {
     this.pageSize = val;
     this.getTmemberList()
    },
    async pageInit(){
      try {
        let [listMemberResp,listHealthmgrResp] = await Promise.all([
            MemberQueryAll(),
            queryAllThealthmgr()
        ])
        this.MemberList=listMemberResp.data
        this.parentTmemberList=listHealthmgrResp.data
      } catch(error) {
       console.log(error)
      }
    },
    getTmemberList() {
      this.loading = true
      MemberQueryLike(this.search)
      .then(response => {
        this.MemberList = response.data
        this.loading = false
        console.log(this.MemberList)
      })
      .catch(error => {
        console.log(error)
        this.loading = false
      })
    },
    handleDeleteMember(row) {
      this.$confirm('确定删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(() => {
          this.loading = true
          MemberDelete(row.id).then(response => {
          this.loading = false
          this.getTmemberList();
        })
        .catch(error => {
          console.log(error)
        })
      })
      .catch(() => {})
    },
    handleEditMember(row) {
      this.loading = true
      MemberQueryById(row.id)
      .then(response => {
        console.log(response)
        this.$refs.memberEdit.$emit('openEditTmemberDialog',response.data)
        this.loading = false
      })
      .catch(error => {
        console.log(error)
      })
    },
    handleCreateMember(){
      this.$refs.memberEdit.$emit('openAddTmemberDialog')
    }
  },
  components: {MemberEdit},
    created() {
      this.pageInit();
    }

}
</script>

<style lang="scss" scoped>
.search-row {
  padding-bottom: 8px;
  .el-input {
    width: 260px;
  }
}

.router-locked {
  color: red;
}
.router-not-locked {
  color: green;
}
</style>
